<%@ page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="html" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<html:head/>
<link rel="stylesheet" type="text/css"
	href="/ComputerStore/public/css/admin_content.css">
<script type="text/javascript"
	src="/ComputerStore/public/js/jquery-1.6.2.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Quản lý danh mục sản phẩm</title>
</head>
<body>
	<h1>Quản lý danh mục</h1>
	<div id="options">
		<a id="showList" href="#">&nbsp;&nbsp;&nbsp;Danh sách danh mục&nbsp;&nbsp;&nbsp;</a> <a id="showForm" href="#">&nbsp;&nbsp;&nbsp;Thêm
			danh mục&nbsp;&nbsp;&nbsp;</a>
	</div>
	<br />

	<!-- Table danh sách danh mục -->
	<div id="list">
		<div class="title">Danh sách Danh mục</div>
		<div class="content" align="center">
			<html:select cssClass="textfield" id="parentCategorySelect" label="Danh mục cha"
					list="categoryList" listKey="id" listValue="name" /><br/><br/>
			<table border="1" id="listCategoryTable">
				<tr>
					<th>STT</th>
					<th>Tên danh mục</th>
					<th>Danh mục cha</th>
					<th>Kích hoạt</th>
					<th>Mã</th>
					<th>Thao tác</th>
				</tr>
				<html:iterator value="categoryList" var="category" status="itStatus">
					<tr id="<html:property value="id"/>">
						<td align="center"><html:property value="#itStatus.Count" /></td>
						<td><html:property value="name" /></td>
						<td style="display:none"><html:property value="parentId" /></td>
						<td><html:property value="parentId" /></td>
						<html:if test="status==true">
							<td align="center">Đã kích hoạt</td>
						</html:if>
						<html:else>
							<td align="center">Chưa kích hoạt</td>
						</html:else>
						<td><html:property value="id" /></td>
						<td align="center"><a class="operation"
							href="deleteCategory?id=<html:property value="id"/>">&nbsp;Xóa&nbsp;</a>&nbsp;-&nbsp;<a
							class="operation" name="edit" id=<html:property value="id"/>
							href="#">&nbsp;Sửa&nbsp;</a></td>
					</tr>
				</html:iterator>
			</table>
		</div>
	</div>

	<!-- Thêm danh mục -->
	<div id="formAdd">
		<div class="title">Thêm danh mục</div>
		<div class="content" align="center">
			<html:form action="addCategory" method="post" validate="true">
				<html:select cssClass="textfield" label="Danh mục cha" name="category.parentId"
					list="categoryList" listKey="id" listValue="name" />
				<html:textfield cssClass="textfield" label="Tên danh mục" required="true" id="cat1"
					name="category.name" size="50" />
				<html:checkbox cssClass="textfield" name="status" label="Hiển thị" />
				<html:submit id="button" value="Thêm mới" />
			</html:form>
		</div>
	</div>

	<!-- Cập nhật danh mục -->
	<div id="formEdit">
		<div class="title">Sửa thông tin danh mục</div>
		<div class="content" align="center">
			<html:form action="editCategory" method="post" validate="true">
				<html:hidden id="idEditTextfield" name="category.id" />
				<html:textfield id="nameEditTextfield" cssClass="textfield"
					name="category.name" label="Tên danh mục" size="50" required="true"/>
				<html:select id="parentEditSelect" cssClass="textfield"
					name="category.parentId" label="Danh mục cha" list="categoryList"
					listKey="id" listValue="name"></html:select>
				<html:checkbox id="statusEditCheckBox" cssClass="textfield" name="status" label="Hiển thị" />
				<html:submit id="button"  value="Cập nhật" />
			</html:form>
		</div>
	</div>
	<!-- Javascript -->
	<script>
		$(document)
				.ready(
						function() {
							$("#formEdit").css("display", "none");
							$("#formAdd").css("display", "none");
							$("#showList").css("border-style", "inset");

							$("#showForm").click(function() {
								$(this).css("border-style", "inset");
								$("#showList").css("border-style", "outset");
								$("#list").hide("fast");
								$("#formEdit").hide("fast");
								$("#formAdd").show("fast");
								$("#cat1").val("");
							});

							$("#showList").click(function() {
								$(this).css("border-style", "inset");
								$("#showForm").css("border-style", "outset");
								$("#formAdd").hide("fast");
								$("#formEdit").hide("fast");
								$("#list").show("fast");
							});
							
							$("#parentCategorySelect").change(function(){
								var value = $(this).attr("value");
								$("#listCategoryTable td").each(function(i){
									if(i>0){
										var col= (i-1)%7;
										if(col == 2 && $(this).text()== value){
											$(this).parent().show("fast");
										}if(col==2 && $(this).text()!= value){
											$(this).parent().hide("fast");
										}
									}
								});
							});

							var valueArray = new Array();

							$("a").click(function() {
								if ($(this).attr("name") == "edit") {
									var id = $(this).attr("id");
									$('#' + id + ' td').each(function(index) {
														valueArray[index] = $(this).text();
													});
									$("#idEditTextfield").val(id);
									$("#nameEditTextfield").val(valueArray[1]);
									$("#parentEditSelect").attr({"key":valueArray[3],"value":valueArray[2]});
									if (valueArray[4] == "Đã kích hoạt") {
										$("#statusEditCheckBox").attr('checked',true);
									}else{
										$("#statusEditCheckBox").attr('checked',false);
									}
									$("#showList").css("border-style","outset");
									$("#list").hide("fast");
									$("#formEdit").show("fast");
								}
							});														
						});
	</script>
</body>
</html>